.shape {
  /* 椭圆 */
  background: url(../images/jirx.jpg);
  background-size: 100% 100%;
  width: 400px;
  height: 200px;
  position: relative;
  /* border-radius:  50%;  */
  /* 二分之一椭圆 */
  /* border-radius: 100% 0 0 100% / 50%; */
  /* 四分之一椭圆
    border-radius: 100% 0 0 0; */

  /* 平行四边形 */
  /* transform: skewX(-45deg);
    background: #fb3; */

  /* 菱形 */
  /* clip-path: polygon(50% 0, 100% 50%,50% 100%, 0 50%);
    transition: 1s clip-path; */

  /* 切角效果 */
  /* background: #58a;
    background:
     linear-gradient(135deg, transparent 15px, #58a 0)
     top left,
     linear-gradient(-135deg, transparent 15px, #58a 0)
     top right,
     linear-gradient(-45deg, transparent 15px, #58a 0)
     bottom right,
     linear-gradient(45deg, transparent 15px, #58a 0)
     bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat; */

  /* 弧形切角 */
  /* background: #58a;
    background:
    radial-gradient(circle at top left,
    transparent 15px, #58a 0) top left,
    radial-gradient(circle at top right,
    transparent 15px, #58a 0) top right,
    radial-gradient(circle at bottom right,
    transparent 15px, #58a 0) bottom right,
    radial-gradient(circle at bottom left,
    transparent 15px, #58a 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat; */

 
} 

/* 棱形和正常互变的动画 */
/* .shape:hover {
    clip-path: polygon(0 0, 100% 0,100% 100%, 0 100%);
} */

/* 伪元素实现平行四边形 */
/* .shape::before {
    content: ''; 
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    background: #58a;
    transform: skew(45deg);
} */

/* 防止内部倾斜 */
/* .shape div{
    transform: skewX(45deg);
} */
